<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08-模板引擎</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 1. 引入 js -->
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
<body>
    <ul></ul>
    <ol></ol>
    <h1></h1>
    <!-- 2. 创建模块 -->
    <script type="text/html" id="tpl-game">
        <li>{{game}}</li>
        <li>{{hero}}</li>
        <li>彭于晏</li>
        <li>李宗盛</li>
    </script>
    <script>
       let result = template("tpl-game",{
            game:'魔兽世界',
            hero:'项羽',
       });
       console.log(result);
       $('ul').html(result);
       $('h1').html(result);

        /* 
            模板引擎 ：数据 H5 代码的分离。体现模块化思想

            模板引擎 art-template
            中文官网 : https://www.kancloud.cn/lanju/art-template/1500276
            使用步骤:
                1. 引入 js
                2. 创建模板(在模板里，书写 H5 代码)
                3. 给模板绑定数据
                4. 获取绑定的数据，并渲染。
                5. 返回模板引擎的内容

            语法：    
                template(参数1, 参数2);
                    参数1：模板的 id
                    参数2：提供的数据
                    处理: 模板和数据进行绑定
                    输出：模板的内容(H5 代码)
        */
       // 绑定数据
    </script>
</body>
</html>